<template>
  <div class="tabel_Background_Hidden">
    <div
      class="container2"
      ref="usage_ref"
      style="width: 100%;height: 80%;"
    ></div>
    <div class="blur"></div>
  </div>
</template>

<script>
export default {
  name: "MtableHidden",
  data() {
    return {
      chartInstance: null,
      allData: null
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
    },
    getData() {
      //服务器的数据请求位置

      // this.allData = ret
      this.updateChart();
    },
    updateChart() {
      const option = {
        backgroundColor: "", //rgba设置透明度0.1
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          }
        },
        legend: {
          data: ["当前井斜", "伸长量", "余量", "剩余距离"],
          textStyle: {
            color: "#fff"
          },
          top: "auto"
          // y: 0
        },
        grid: {
          //x轴与y轴离dom边的距离
          top: "5%",
          right: "5%",
          bottom: "10%",
          left: "5%"
        },
        // grid: {
        //   // top: '40%',
        //   left: "5%",
        //   right: "4%",
        //   containLabel: true
        // },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },

        toolbox: {
          right: 10,
          y: 20,
          iconStyle: {
            borderColor: "#fff"
          },
          // top:10,
          feature: {
            // dataView: {
            //   show: true,
            //   title: '数据视图',
            //   lang: ['数据视图：', '关闭', '导出Excel'], // 按钮
            //   contentToOption: function(opts) {
            //     $(".echarts_max").table2excel({ //下载jquery.table2excel.js，引入，$("#tempChart")是Echarts容器
            //       exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
            //       filename: "最大需量", // 文件名称
            //       name: "Excel Document Name.xls",
            //       exclude_img: true,
            //       exclude_links: true,
            //       exclude_inputs: true
            //     });
            //   },
            //   optionToContent: function(opt) {
            //     // console.log(opt)
            //     //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
            //     var axisData = opt.xAxis[0].data; //坐标轴
            //     var series = opt.series; //折线图的数据
            //     var tdHeads =
            //       '<td  style="margin-top:10px; padding: 0 15px">日期</td>'; //表头
            //     var tdBodys = "";
            //     series.forEach(function(item) {
            //       tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
            //     });
            //     var table =
            //       `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`;
            //     for (var i = 0, l = axisData.length; i < l; i++) {
            //       for (var j = 0; j < series.length; j++) {
            //         if (series[j].data[i] == undefined) {
            //           tdBodys += `<td>${"-"}</td>`;
            //         } else {
            //           tdBodys += `<td>${series[j].data[i][1]}</td>`;
            //         }
            //       }
            //       table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;
            //       tdBodys = "";
            //     }
            //     table += "</tbody></table>";
            //     return table;
            //   },
            // },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: {
          name: "段号",
          type: "category",
          boundaryGap: false,
          data: [
            "100101",
            "100102",
            "100201",
            "100202",
            "100203",
            "100301",
            "100302"
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          name: "值",
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          splitLine: {
            show: false // X轴线 颜色类型的修改
          }
        },
        areaStyle: {
          // 颜色自上而下渐变
          color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              // 1代表上面
              offset: 0.5,
              color: "#044065EF"
            },
            {
              // 1代表上面
              offset: 1,
              color: "#04406554"
            }
          ]),
          opacity: 1 // 填充区域透明度
        },
        series: [
          {
            name: "当前井斜",
            type: "line",
            data: [20, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              color: "#00aa00"
            }
          },
          {
            name: "伸长量",
            type: "line",
            data: [220, 18, 191, 234, 290, 330, 310],
            itemStyle: {
              color: "#0A8CFF"
            }
          },
          {
            name: "余量",
            type: "line",
            data: [150, 232, 21, 154, 190, 330, 410],
            itemStyle: {
              color: "#ffef03"
            }
          },
          {
            name: "剩余距离",
            type: "line",
            data: [320, 32, 301, 334, 390, 330, 320],
            itemStyle: {
              color: "#ff0606"
            }
          }
        ]
      };
      this.chartInstance.setOption(option);
    }
  },
  props: {
    title: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container2 {
  width: 100%; //6.6rem;
  height: 100%; //2.3rem;
  /* background-color: #867474; */
}

.tabel_Background_Hidden {
  width: 100%; //6.6rem;
  height: 100%; //2.3rem;
  // margin-left: 10px;
  // margin-top: -40px;
  /*  margin-right: 10px;
    width: 75.125rem; */
  /* border: 1px solid rgb(12, 50, 107); */
  /* background-color: rgb(7, 15, 25); */
}

body {
  font-style: white;
}
</style>
